<template>
  <div class="shop-edit">
    <!-- Drawer抽屉 -->
    <Drawer
        :title="title"
        v-model="visible"
        width="720"
        draggable
        :mask-closable="type == '0'">
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <div class="drawer-header">
          <div style="margin-right: 16px">基本信息</div>
        </div>
        <Form label-colon v-show="type != '2'">
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="店铺ID">
                {{ form.id }}
                <Tooltip trigger="hover" placement="right" content="店铺已禁用">
                  <Icon
                      v-show="form.status == -1"
                      type="md-lock"
                      size="18"
                      style="margin-left: 10px; cursor: pointer"/>
                </Tooltip>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="店铺名称">
                {{ form.shopName }}
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Form
            ref="form"
            :model="form"
            :rules="formValidate"
            label-position="top">
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="店铺名称" prop="shopName">
                <Input v-model="form.shopName"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="邮箱" prop="email">
                <Input v-model="form.email"/>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="手机号" prop="phone">
                <Input v-model="form.phone"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="社会统一信用码">
                <Input v-model="form.creditCode"/>
              </FormItem>
            </Col>
          </Row>
          <Divider/>
          <p class="drawer-title">店铺资料</p>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="所在地址" prop="address">
                <al-cascader
                    v-model="form.address"
                    data-type="name"
                    level="2"
                    transfer/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="街道地址">
                <Input v-model="form.street"/>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="店铺LOGO">
                <upload-pic-input v-model="form.avatar"></upload-pic-input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="创建日期" prop="createTime">
                {{ form.createTime }}
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="简介">
                <Input type="textarea" v-model="form.description" :rows="4"/>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit">提交
        </Button>
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import {validateMobile,} from "@/libs/validate";
import {addShop, updateShop} from "@/api/things";
import uploadPicInput from "@/views/my-components/mrdeer/upload-pic-input";

export default {
  name: "user",
  components: {
    uploadPicInput
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      roleList: [],
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 816,
      form: {
        address: [],
      },
      formValidate: {
        // 表单验证规则

        phone: [
          {required: true, message: "请输入手机号", trigger: "change"},
          {validator: validateMobile, trigger: "change"},
        ],
        email: [
          {required: true, message: "请输入邮箱地址"},
          {type: "email", message: "邮箱格式不正确"},
        ]
      },
    };
  },
  methods: {
    init() {

    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (typeof this.form.birth == "object") {
            this.form.birth = this.format(this.form.birth, "yyyy-MM-dd");
          }
          this.form.address = this.form.address.toString();
          if (this.type == "1") {
            // 编辑
            this.submitLoading = true;
            updateShop(this.form).then((res) => {
              this.submitLoading = false;
              if (res.status == 200) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          } else {
            // 添加
            this.submitLoading = true;
            addShop(this.form).then((res) => {
              this.submitLoading = false;
              if (res.status == 200) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          }
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑店铺";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加店铺";
        this.maxHeight =
            Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "店铺详情";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type == "0" || this.type == "1") {
        // 回显数据
        let data = this.data;
        // 地址
        if (data.address) {
          data.address = data.address.split(",");
        } else {
          data.address = [];
        }
        this.form = data;
      } else {
        // 添加
        this.form = {
          type: 0,
          address: []
        };
      }
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
</style>

